<template>
  <div class="main">
    <el-config-provider :locale="elLocale">
      <router-view></router-view>
      <!-- <Loading :visible="loading.visible" /> -->
    </el-config-provider>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useCounter } from "@/store/counter";
import { useI18n } from "vue-i18n";
// 语种列表
import zhCn from "element-plus/es/locale/lang/zh-cn";
import enUS from "element-plus/es/locale/lang/en";
import { useLoading } from "./store/loading";
// import Loading from "./components/common/loading.vue";

const useCounterStore = useCounter();
// const loading = useLoading(); // 全局loading
// 切换语言
let elLocale = ref(zhCn);
const { locale } = useI18n();
function changeLocale(v = "zh-CN") {
  locale.value = v;
  switch (v) {
    case "zh-CN":
      elLocale.value = zhCn;
      break;
    case "en":
      elLocale.value = enUS;
      break;
    default:
      elLocale.value = zhCn;
      locale.value = "zh-CN";
      return;
  }
}

onMounted(() => {
  changeLocale(useCounterStore.locale);
});

watch(
  () => useCounterStore.locale,
  () => {
    changeLocale(useCounterStore.locale);
  }
);
</script>

<style scoped>
body {
  margin: 0px;
  padding: 0px;
}
.main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* color: #2c3e50; */
  margin-top: 60px;
}
</style>
